<template>
  <dl class="oper-list-card" :class="id===item.id?'active':''">
    <dt>
      <p class="time">{{ formattedDate(item.time) }}</p>
      <h5 class="title">{{ item.name }}</h5>
    </dt>
    <dd>
      <div class="oper-list-card-item">
        <label>营运资本计算方式：</label>

        <span>{{ item.status| filtersOption(operatingriskStatusOption) }}</span>
      </div>
      <div class="oper-list-card-item">
        <label>永续增长率：</label>
        <span>{{ item.zzl }}</span>
      </div>
      <div class="oper-list-card-item">
        <label>IRR：</label>
        <span>{{ item.ipr }}</span>
      </div>
      <div class="oper-list-card-item">
        <label>NPV：</label>
        <span>{{ item.npv }}万元</span>
      </div>
      <div class="oper-list-card-item">
        <label>静态回收期：</label>
        <span>{{ item.jthsq }}年</span>
      </div>
      <div class="oper-list-card-item">
        <label>动态回收期：</label>
        <span>{{ item.dthsq }}年</span>
      </div>
    </dd>
  </dl>
</template>
  <script>
import { formattedDate } from "@/utils/time";
import { operatingriskStatusOption } from "@/config/options";
export default {
  name: "ListCard",
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    id: {}
  },
  data() {
    return {
      operatingriskStatusOption
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    formattedDate(time) {
      return formattedDate(time);
    }
  },
  filters: {
    filtersOption: function(val, option) {
      // 四舍五入 小数点后保留两位
      const data = option && option.find(v => v.value == val);
      return data ? data.label : val;
    }
  }
};
</script>
  <style lang="scss" scoped>
.oper-list-card {
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.5s;
  &:hover {
    transform: translate(0px, -5px);
    dt {
      .title {
        transform: translateX(5px);
      }
    }
    dd {
      background-color: rgb(242, 244, 247);
      .oper-list-card-item {
        label {
          color: #333;
        }
      }
    }
  }
  &.active {
    dt {
      color: #fff;
      background-color: rgba(107, 151, 255, 1);
      background-image: linear-gradient(
        to right,
        rgba(62, 120, 255, 1),
        rgba(116, 157, 255, 1)
      );
      .time {
        color: rgba($color: #fff, $alpha: 0.7);
      }
      .title {
        color: #fff;
      }
    }
    dd {
      background-color: rgba(235, 241, 255, 1);
    }
  }
  dt,
  dd {
    padding: 10px 15px;
  }

  dd {
    background-color: rgba(249, 250, 252, 1);
  }
  dt {
    border-bottom: 1px solid #eee;
    .time {
      color: #888;
      margin-bottom: 8px;
      font-size: 12px;
    }
    .title {
      font-size: 15px;
      font-weight: bold;
      color: #222;
      transition: transform 0.5s;
    }

  }
  &-item {
    padding: 8px 0px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    label {
      color: #888;
      font-weight: 400;
      font-size: 14px;
    }
    span {
      font-size: 14px;
      color: #333;
    }
  }
}
</style>
  